<template>
    <div class="hotPage">
        <!-- <div class="header">
            <vue-tabbar-slide class="navbar" :options="options" @callback="callback"></vue-tabbar-slide>
            <i class="icon-setting" @click="add"></i>
        </div> -->
        <lodeMore :loadBottom="loadMore" :allLoaded="allLoaded" ref="loadmore" :loadTop="loadTop">
            <div :class="isloadTop && !loading  && updateNum ? 'updateTip active':'updateTip'">AE推荐引擎有{{updateNum}}条更新</div>
            <div class="list">
                <div v-for="(item, index) in list" :key="'an_item_'+index">
                    <adItem v-if="item.type=='ad'" :data="item.data"></adItem>
                    <articleItem v-else :data="item.data"></articleItem>
                </div>
                <!-- <div slot="bottom" class="mint-loadmore-bottom">
                    <span v-show="!loading">↓</span>
                    <span v-show="loading">Loading...</span>
                </div> -->
                <div slot="top" class="mint-loadmore-top">
                     <!-- <span v-show="!loading">↑</span>
                    <span v-show="loading">Loading...</span> -->
                    <!-- <span v-show="loading">刷新中...</span>                     -->
                </div>
            </div>
        </lodeMore>
    </div>
</template>

<style lang="scss" scope>
    .hotPage {
        background: #FFF;
        padding-bottom: 30px;
        overflow-y: scroll;
        font-size: 32px;

        * {
            box-sizing: border-box;
        }

        .updateTip{
            background: #81dde9;
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            color: #037eb7;
            height: 0;
            transition: all ease-in-out 0.5s;
            overflow: hidden;
            &.active{
                height: 60px;
                opacity: 1;
            }
        }

        .header {
            display: flex;

            .navbar {
                width: 670px;
            }

            .icon-setting {
                width: 80px;
                height: 70px;
                background: url('/images/gd.png');
                background-repeat: no-repeat;
                background-size: 24px 34px;
                background-position: 30px 20px;
            }
        }

        .list {
            margin-top: 30px;
            min-height: calc(100vh - 80px);
        }
    }
</style>

<script>
    import Vue from 'vue';
    // import navbar from '@/compoents/navbar'
    import vueTabbarSlide from 'vue-tabbar-slide'
    Vue.use(vueTabbarSlide);
    import articleItem from '@/compoents/articleItem'
    import adItem from '@/compoents/adItem'
    import lodeMore from '@/compoents/loadmore'
    export default {
        name: "hotPage",
        data() {
            return {
                isloadTop: false,
                options: {
                    //required(必填项)
                    container: 'mySlide1',
                    slideData: [],
                    //用来传递data-id
                    slideId: [],
                    //optional(可选项)
                    width: '80px',
                    index: 0,
                    color: '#999999',
                    checkedColor: '#333333',
                    downLineColor: '#333333'
                },
                wrapperHeight: 0,
                cate_index: 0,
                list: [],
                page: 0,
                cates: [],
                loading: false,
                topStatus: "",
                updateNum: 0,
                allLoaded: false,
            }
        },
        components: {
            lodeMore,
            adItem,
            articleItem
        },
        mounted() {
            // this.getData()
            // this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
            this.refresh()
        },
        computed: {
            tag() {
                // let item = this.cates[this.cate_index]
                // return item ? item.tag : ''
                return this.$route.query.tag || 'dyvideo'
            }
        },
        watch: {
            'cate_index'() {
                console.log("cate_index 变了")
            },
            tag(v) {
                // dyvideo
                console.log("tag 变了")
                this.refresh()
            }
        },
        methods: {
            loadTop() {
                this.isloadTop = true
                this.loading = true
                this.$store.dispatch('news', {
                    tag: this.tag,
                    page: 1,
                    options: {
                        loading: false
                    }
                }).then(res => {
                    let {
                        ad,
                        news
                    } = res.data
                    this.page = news.current_page
                    let list = [];
                    news.data.forEach(function (v, i) {
                        list.push({
                            type: 'news',
                            data: v
                        })
                    });

                    if (ad && ad.id) {
                        list.push({
                            type: 'ad',
                            data: ad
                        })
                    }
                    this.updateNum = res.data.update
                    this.list = list
                    this.loading = false
                    this.$refs.loadmore.onTopLoaded();
                    setTimeout(()=>{
                        this.isloadTop = false
                    }, 1000)
                }).catch(e => {
                    this.loading = false
                    setTimeout(()=>{
                        this.isloadTop = false
                    }, 1000)
                    this.$refs.loadmore.onTopLoaded();
                })
            },
            handleTopChange(status) {
                this.topStatus = status; // 这个变量也必须我们自己定义
                //这个函数主要是用来自定义下拉刷新的状态文字，
            },
            getData() {
                this.$store.dispatch('getNav', {}).then(res => {
                    let cates = res.data;
                    this.cates = cates;
                    let slideData = [];
                    let slideId = [];
                    let cate_id;
                    let that = this;
                    cates.forEach(function (v, i) {
                        slideData.push(v.name);
                        slideId.push(v.id);
                        if (i === 0) {
                            that.cate_id = v.id;
                        }
                    });

                    this.options.slideData = slideData;
                    this.options.slideId = slideId;
                    this.getItems();
                })
            },
            refresh() {                
                this.page = 0
                this.list = []
                this.allLoaded = false
                this.getItems();
            },
            callback(event, index, val, id) {
                this.cate_index = index;
                this.page = 0
                this.list = []
                this.allLoaded = false
                let item = this.cates[this.cate_index]
                if (item.type == 1) {
                    window.open(item.href)
                    return false
                }
                this.getItems();
            },
            getItems() {
                this.isloadTop = false
                let list = this.list
                let page = this.page
                if (this.allLoaded) return false
                this.loading = true
                this.$store.dispatch('news', {
                    tag: this.tag,
                    page: page + 1
                }).then(res => {
                    let {
                        ad,
                        news
                    } = res.data
                    this.page = news.current_page
                    news.data.forEach(function (v, i) {
                        list.push({
                            type: 'news',
                            data: v
                        })
                    })
                    if (news.data.length < news.per_page) {
                        this.allLoaded = true
                    }
                    if (ad && ad.id) {
                        list.push({
                            type: 'ad',
                            data: ad
                        })
                    }
                    this.list = list
                    this.loading = false
                    this.$refs.loadmore.onBottomLoaded()
                    // this.$refs.loadmore.onTopLoaded();
                }).catch(e => {
                    console.log("Error", e)
                    this.loading = false
                    this.$refs.loadmore.onBottomLoaded()
                    // this.$refs.loadmore.onTopLoaded();
                })
            },
            add(e) {
                this.$router.push({
                    path: '/m/additem'
                })
            },
            loadMore() {
                this.getItems()
            }
        }
    }
</script>